<!--
 * @Description: 大数据选择框组件
-->
<template>
  <div class="_ehl_big_select">
    <div class="_ehl_big_select_left _ehl_big_select_box">
      <div class="_ehl_big_select_title">全部</div>
      <ehl-form
        :ref="ref1"
        :options="leftForm"
        :data="leftData"
        :labelWidth="labelWidthLeft"
        custom-class="_ehl_big_select_left_form"
      />
    </div>
    <div class="_ehl_big_select_right _ehl_big_select_box">
      <div class="_ehl_big_select_title">已选</div>
      <ehl-form
        :ref="ref2"
        :options="rightForm"
        :data="value"
        :labelWidth="labelWidthRight"
        custom-class="_ehl_big_select_left_form"
      />
    </div>
  </div>
</template>
<script>
  import ehlForm from '@/common'
  export default {
    props: {
      //左边的label宽度
      labelWidthLeft: {
        Object: Array,
        default: () => 100,
      },
      //右边的label宽度
      labelWidthRight: {
        Object: Array,
        default: () => 100,
      },
      //左边结构
      leftForm: {
        type: Object,
        default: () => ({
          select1: {
            type: 'select',
            label: '分级集合',
            lineStyle: { display: 'inline-block', 'margin-right': '10px', width: '50%' },
            options: [],
            prop: { label: 'lab', value: 'id' },
            init: function (data) {
              data.current.options.clearAll()
              let tmp = [
                { id: 1, lab: 'qwe1' },
                { id: 2, lab: 'qwe2' },
                { id: 3, lab: 'qwe3' },
                { id: 4, lab: 'qwe4' },
              ]
              tmp.forEach(i => {
                data.current.options.push(i)
              })
            },
            change: function (data) {
              data.formData.table
            },
          },
          button1: {
            type: 'button',
            vertical: true,
            lineStyle: { display: 'inline-block', width: '48%' },
            position: 'right', //left,center,right
            buttons: [
              {
                name: '选中分级集合',
                class: 'cpt_btn_blue_white',
                click: function (data) {
                  if (isEmpty(data.formData.select1)) {
                    return
                  }
                  if (
                    !data.other.form2Config.tabs1.list.contain(
                      data.formData.select1,
                      'id',
                    )
                  ) {
                    data.other.form2Config.tabs1.list.push(data.formData.select1)
                  }
                },
              },
            ],
          },
          select2: {
            type: 'select',
            label: '分类集合',
            lineStyle: { display: 'inline-block', 'margin-right': '10px', width: '50%' },
            options: [],
            prop: { label: 'lab', value: 'id' },
            init: function (data) {
              data.current.options.clearAll()
              let tmp = [
                { id: 1, lab: 'qwe1' },
                { id: 2, lab: 'qwe2' },
                { id: 3, lab: 'qwe3' },
                { id: 4, lab: 'qwe4' },
              ]
              tmp.forEach(i => {
                data.current.options.push(i)
              })
            },
            change: function (data) {
              data.formData.table
            },
          },
          button2: {
            type: 'button',
            vertical: true,
            lineStyle: { display: 'inline-block', width: '48%' },
            position: 'right', //left,center,right
            buttons: [
              {
                name: '选中分类集合',
                class: 'cpt_btn_blue_white',
                click: function (data) {
                  if (isEmpty(data.formData.select2)) {
                    return
                  }
                  if (
                    !data.other.form2Config.tabs2.list.contain(
                      data.formData.select2,
                      'id',
                    )
                  ) {
                    data.other.form2Config.tabs2.list.push(data.formData.select2)
                  }
                },
              },
            ],
          },
          input: {
            type: 'input',
            label: '数据项元素',
            placeholder: 'Enter搜索',
            clearable: true,
            lineStyle: { display: 'inline-block', 'margin-right': '10px', width: '50%' },
            suffixIcon: 'el-icon-search',
            enter: function (data) {
              data.current.value
              data.formData.table
            },
            clear: function (data) {
              data.formData.table
            },
          },
          button3: {
            type: 'button',
            vertical: true,
            lineStyle: { display: 'inline-block', width: '48%' },
            position: 'right', //left,center,right
            buttons: [
              {
                name: '选中数据项元素',
                class: 'cpt_btn_blue_white',
                click: function (data) {
                  data.formData.table.forEach(i => {
                    if (
                      i.checked &&
                      !data.other.vue.value.table.contain(i, 'dataLinkName')
                    ) {
                      let tmp = JSON.parse(JSON.stringify(i))
                      tmp.checked = false
                      data.other.vue.value.table.push(tmp)
                    }
                  })
                },
              },
            ],
          },
          table: {
            label: '',
            type: 'table',
            page: 1,
            size: 10,
            total: 20,
            layout: 'total ,prev, pager, next, jumper',
            position: 'right', //center,left,right
            style: { height: '505px', overflow: 'auto' },
            sizeChange(data) {
              this.size = data.current.size
              data.other.vue.getList()
            },
            pageChange(data) {
              this.page = data.current.page
              data.other.vue.getList()
            },
            columns: [
              {
                prop: 'dataLinkName',
                label: '数据项',
              },
              {
                prop: 'dataLinkName',
                label: '所属分类',
              },
              {
                prop: 'dataLinkName',
                label: '所属分级',
              },
            ],
          },
        }),
      },
      //左边数据
      leftData: {
        type: Object,
        default: () => ({
          select1: {},
          select2: {},
          input: '',
          table: [...Array(20).keys()].map(i => {
            return { checked: false, dataLinkName: `项目${i}` }
          }),
        }),
      },
      //右边的数据
      value: {
        Object: Array,
        default: () => ({
          tabs1: [{ id: 3, lab: 'qwe3' }],
          tabs2: [{ id: 4, lab: 'qwe4' }],
          table: [{ checked: false, dataLinkName: 'qwe' }],
        }),
      },
      //右边结构
      rightForm: {
        type: Object,
        default: () => ({
          tabs1: {
            type: 'tabs',
            label: '已选分级集合',
            prop: { name: 'lab', id: 'id' },
            list: [...Array(4).keys()].map(i => {
              return { lab: `name${i}`, id: `id${i}` }
            }),
            minWidth: 100,
            maxWidth: 150,
            cusTabClass: 'cusTabClass1',
            clickable: true,
            showDelIcon: true,
            showNextIcon: true,
            tabClick: function (data) {
              console.log(JSON.stringify(data.current.select))
            },
            tabDel: function (data) {
              console.log(JSON.stringify(data.current.del))
            },
          },
          tabs2: {
            type: 'tabs',
            label: '已选分类集合',
            prop: { name: 'lab', id: 'id' },
            list: [...Array(4).keys()].map(i => {
              return { lab: `name${i}`, id: `id${i}` }
            }),
            minWidth: 100,
            maxWidth: 150,
            cusTabClass: 'cusTabClass2',
            clickable: true,
            showDelIcon: true,
            showNextIcon: true,
            tabClick: function (data) {
              console.log(JSON.stringify(data.current.select))
            },
            tabDel: function (data) {
              console.log(JSON.stringify(data.current.del))
            },
          },
          button1: {
            type: 'button',
            label: '已选表元素',
            lineStyle: { 'margin-bottom': '20px !important' },
            position: 'right', //left,center,right
            buttons: [
              {
                name: '取消选中数据项',
                class: 'cpt_btn_red_white',
                click: function (data) {
                  let tmp = []
                  data.formData.table.forEach(i => {
                    if (!i.checked) {
                      tmp.push(i)
                    }
                  })
                  data.formData.table.clearAll()
                  tmp.forEach(i => {
                    data.formData.table.push(i)
                  })
                },
              },
            ],
          },
          table: {
            vertical: true,
            type: 'table',
            style: { height: '505px', overflow: 'auto' },
            total: 0,
            columns: [
              {
                prop: 'dataLinkName',
                label: '选中项',
              },
              0,
            ],
          },
        }),
      },
    },
    components: { ehlForm },
    data() {
      return {
        ref1: `big_data1_${Math.random()}`,
        ref2: `big_data2_${Math.random()}`,
        form1Config: null,
        form2Config: null,
      }
    },
    mounted() {
      this.form1Config = this.$refs[this.ref1].getOptions()
      this.form2Config = this.$refs[this.ref2].getOptions()
      this.$refs[this.ref1].addParam({ form2Config: this.form2Config })
    },
    addParam(param) {
      this.$refs[this.ref1].addParam(param)
      this.$refs[this.ref2].addParam(param)
    },
  }
</script>
